<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title></title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
      <style>
      #App{height:100%; background:#fff;}
      .foot{width:100%; height:60px; background:#62c3d0; overflow: hidden;}
      .foot .fw{padding:9px; margin-top:4px;}
      .foot .avatar{width:40px; height:40px; margin-right:8px;}
      .foot .avatar .pic{
        width:40px; height:40px; border: 1px solid #fff; border-radius:50%; overflow:hidden;
        background-position:center; background-size:100%; background-repeat:no-repeat;
      }
      .foot .tit{}
      .foot .tit .speecher{font-size:12px; color:#fff; opacity:0.6;}
      .foot .tit .speecher .name{padding-right:5px;}
      .foot .tit .title{font-size:12px; color:#fff; font-weight:bold;}
      .foot .control{min-width:96px; overflow:hidden;}
      .foot .control .o{width:36px; height:36px; text-align:center; line-height:30px; float:right; border-radius:50%;
        overflow:hidden; margin-left:8px; position:relative;}
      .foot .control .o i{width:36px; height:36px; line-height:36px; font-size:18px;}
      .foot .play{border:1px solid #fff; color:#fff; position:relative;}
      .foot .o i.icon-bofang-copy{font-size:20px; line-height:38px;}
      .foot .next{border:1px solid #fff; color:#fff;}
      .foot .auto{border:1px solid #ddd; color:#ddd;}
      .foot .autoing{border:1px solid #fff; color:#fff;}
      .autoplay-tip{
        width:130px; height:34px; position:fixed; right:0px; bottom:56px;
        background-color:rgba(0,0,0,0.75); z-index:9999; display:none;
      }
      .autoplay-tip .txt{
        width:130px; height:34px; line-height:34px; text-align:center; font-size:13px; color:#fff;
        position:relative;
      }
      .autoplay-tip .txt .ico{
          position:absolute; right:22px; top:34px;
          height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0;
          border-color: #000 transparent transparent transparent;
          border-style: solid; border-width: 5px;
      }
      .next-tip-wrap{
        width:70%; height:70px; padding:5px; position: fixed; left:15%; top:250px;
        z-index:999; background-color:rgba(68,68,68,0.6); border-radius:5px; display:none;
      }
      .next-tip{color:#fff; font-size:16px; height:30px; line-height:30px; margin:0; text-align: center;}
      .next-tip-name{font-size:14px; color:#fff; margin:0px; height:30px; line-height:30px; text-align: center;}
      @-webkit-keyframes rotate{
        from{-webkit-transform:rotate(0deg)}
        to{-webkit-transform:rotate(360deg)}
      }
      .xz{-webkit-animation:rotate 20s linear infinite;}
      </style>
  </head>
  <body>
    <div id="App" class="row-flex">
        <div id="header" class="header dflex">
            <div class="icon" onclick="goback();" tapmode=""><i class="iconfont icon-left back"></i></div>
            <div class="title flex-1 text-overflow">{{name}}</div>
            <div class="icon" tapmode="" @click="changePlayGroup();" style="width:80px;">
              <i class="iconfont" :class="{'icon-iconlist':mode=='big', 'icon-liebiao-copy1':mode=='list'}"></i>
              {{mode=='big'?'列表':'大图'}}
            </div>
        </div>
        <div id="main" class="main flex-1 flex-con">

        </div>
        <div class="foot">
          <div class="fw dflex">
            <div class="avatar">
              <div class="pic" @click="viewPic(files[speecherPic]);" :class="{'xz':!playing.paused&&playing.hk!=-1&&playing.pk!=-1&&playing.ek==-1}" v-bind:style="{backgroundImage:'url('+files[speecherPic]+')'}"></div>
            </div>
            <div class="tit flex-1">
              <div class="speecher text-overflow">
                <span class="name">{{album.author}}</span>
                <span class="signature">{{album.signature}}</span>
              </div>
              <div class="title text-overflow">
                <span v-if="playing.data">{{playing.data.sn+'-'+playing.data.name}}</span>
                <span v-else>{{album.lang?'Click Audio what you want play':'请点击您要播放的讲解'}}</span>
              </div>
            </div>
            <div class="control">
              <div class="o" v-if="!album.lang" @click="clickAutoPlay();" :class="{'auto':autoplay==0, 'autoing':autoplay==1}">
                <i class="iconfont icon-xunhuan"></i>
              </div>
              <div class="o next" @click="clickPlayNext();">
                <i class="iconfont icon-xiayishou"></i>
              </div>
              <div class="o play" @click="clickPlayOrPause();">
                <i class="iconfont" :class="{'icon-bofang-copy':playing.paused, 'icon-zanting7':playing.paused==false}"></i>
              </div>
            </div>
          </div>
        </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript" src="../script/vue.min.js"></script>
  <script type="text/javascript">
      var vue;
      apiready = function(){

        vue = new Vue({
          el:'#App',
          data:{
            did:0,
            aid:0,
            name:'',
            album:{},
            destination:{},
            data:[],        //数据列表
            files:[],
            autoplay:1,     //是否连续播放 默认开启
            mode:'',    //当前播放模式（list、big、map）
            timerTipAutoPlay:0,

            uislider:null, //播放进度控制 模块
            audio:null,    //播放器模块

            audioTip:null, //提示音播放器

            dialogBox:null,

            playing:{
              hk:-1,        //当前播放的对象展厅序号
              pk:-1,        //当前播放的对象看点序号
              ek:-1,        //当前播放的对象扩展序号

              src:'',       //当前播放的音频路径
              duration:0,
              current:0,
              paused:true,  //当前播放的音频状态（播放中/已暂停）

              data:false,      //正在播放的数据

              next_point_tip_audio:'widget://res/audio/tip_for_next_point.mp3', //下一看点提示音
              next_hall_tip_audio:'widget://res/audio/tip_for_next_hall.mp3', //下一展厅提示音
              next_f_hall_tip_audio:'widget://res/audio/tip_for_next_further_hall.mp3',//下一较远展厅
            },
          },
          methods: {
            //初始化播放
            playInit:function(data){
              var that = this;

              var hk = data.hk;
              var pk = data.pk;
              var ek = data.ek;

              //$("#nextTipTxtWrap").hide();
              //$("#nextTipTxt").text("");

              //判断点击的是否是当前播放的？
              if(hk!=that.playing.hk || pk!=that.playing.pk || ek!=that.playing.ek){
                that.stopAll();  //停止所有正在播放的
                that.playing.hk = hk;
                that.playing.pk = pk;
                that.playing.ek = ek;
                if(ek<0 && that.data[hk].point[pk].speech.audio){ //播放普通讲解
                  that.playing.src = that.files[that.data[hk].point[pk].speech.audio];
                  that.playing.data = {
                    sn:that.data[hk].sn+that.data[hk].point[pk].sn,
                    name:that.data[hk].point[pk].name
                  };
                }else if(ek>=0 &&that.data[hk].point[pk].extend[ek].audio){ //播放扩展讲解
                  that.playing.src = that.files[that.data[hk].point[pk].extend[ek].audio];
                  that.playing.data = {
                    sn:that.data[hk].sn+that.data[hk].point[pk].sn,
                    name:that.data[hk].point[pk].name
                  };
                }else{
                  return false;
                }
                that.audio.play({
                    path: that.playing.src
                }, function(ret, err) {
                    if (ret) {
                      that.playingEvt(ret);
                    }
                });
              }else{
                that.playOrPause();
              }
            },
            //播放中...
            playingEvt:function(ret){
              var that = this;
              if(ret.complete==false){
                that.playing.paused = false;
                that.playing.duration = ret.duration;
                that.playing.current = ret.current;
                var percent = parseInt(1000*(that.playing.current/that.playing.duration))/10;
                that.uislider.setValue({
                    id: 1,
                    value: {
                        value: percent
                    }
                });
                api.sendEvent({
                    name: 'Playing',
                    extra: that.playing
                });
              }else{
                //播放完毕，下一曲
                that.playing.paused = true;
                that.uislider.setValue({
                    id: 1,
                    value: {
                        value: 0
                    }
                });
                api.sendEvent({
                    name: 'PlayingStop',
                    extra: that.playing
                });
                that.playTip();
              }
            },
            playTip:function(){
              var that = this;
              if(that.autoplay==1 && that.playing.ek<0){ //连续播放
                var pk = that.getNextPointK();
                if(pk!=-1){
                    //下一看点显示弹框
                    var sn = that.data[that.playing.hk].sn+that.data[that.playing.hk].point[pk].sn;
                    var name = that.data[that.playing.hk].point[pk].name;

                    that.dialogBox.scene({
                        rect: {w: 250, h: 100},
                        texts: {
                            title: '即将播放下一看点',
                            content:sn+" - "+name
                        },
                        styles: {
                            bg: 'rgba(0,0,0,0.5)',
                            title: {bg: 'none', h: 50, size: 14, color: '#fff'},
                            content: {alignment:'center', color:'#fff', size:15, h:50}
                        },
                        optionDatas: []
                    }, null);

                    that.audioTip.play({
                        path: that.playing.next_point_tip_audio
                    }, function(ret, err) {
                        if (ret && ret.complete==true) {
                          that.dialogBox.close({
                              dialogName: 'scene'
                          });
                          window.setTimeout(function(){
                            that.playInit({hk:that.playing.hk, pk:pk, ek:-1});
                          }, 100);
                        }
                    });
                }else{
                  var hk = that.getNextHallK();
                  if(hk!=-1){
                    if(that.data[hk]['note'].length>0){
                      that.audioTip.play({
                          path: that.playing.next_f_hall_tip_audio
                      }, function(ret, err) {
                          if (ret && ret.complete==true) {
                            that.stopAll();
                          }
                      });
                    }else{
                      that.audioTip.play({
                          path: that.playing.next_hall_tip_audio
                      }, function(ret, err) {
                          if (ret && ret.complete==true) {
                            that.stopAll();
                          }
                      });
                    }
                  }
                }
              }else{
                that.stopAll();
              }
            },
            stopAll:function(){
              var that = this;
                for(var i in that.data){
                  for(var j in that.data[i].point){
                    if(that.data[i].point[j].speech){
                      that.data[i].point[j].speech.period_showing = that.data[i].point[j].speech.period_show;
                      that.data[i].point[j].speech.playing = false;
                    }
                    for(var k in that.data[i].point[j].extend){
                      that.data[i].point[j].extend[k].period_showing = that.data[i].point[j].extend[k].period_show;
                      that.data[i].point[j].extend[k].playing = false;
                    }
                  }
                }
                that.playing.hk = -1;
                that.playing.pk = -1;
                that.playing.ek = -1;
                that.playing.src = '';
                that.playing.paused = true;
                that.playing.data = false;
                that.uislider.setValue({
                    id: 1,
                    value: {
                        value: 0
                    }
                });
                that.audio.stop();
                api.sendEvent({
                    name: 'PlayingStopAll',
                    extra: {}
                });
            },

            clickPlayOrPause:function(){
              var that = this;
              if(that.playing.hk==-1 || that.playing.pk==-1){
                alert('请点击您要播放的讲解！');
              }else{
                that.playOrPause();
              }
            },
            playOrPause:function(){
              var that = this;
              if(that.playing.paused){
                  if(that.playing.ek<0){
                    that.data[that.playing.hk].point[that.playing.pk].speech.playing = true;
                  }else{
                    that.data[that.playing.hk].point[that.playing.pk].extend[that.playing.ek].playing = true;
                  }
                  that.playing.paused = false;
                  that.audio.play({
                      path: that.playing.src
                  }, function(ret, err) {
                      if (ret) {
                        that.playingEvt(ret);
                      }
                  });
                  api.sendEvent({
                      name: 'PlayingPause',
                      extra: that.playing
                  });
                  return false;
              }else{
                that.audio.pause();
                that.playing.paused = true;
                api.sendEvent({
                    name: 'PlayingPause',
                    extra: that.playing
                });
              }
            },

            //播放下一曲
            clickPlayNext:function(){
              var that = this;

              var playingHk = that.playing.hk>-1?that.playing.hk:-1;
              var playingPk = that.playing.pk>-1?that.playing.pk:-1;

              var hk = -1;
              var pk = -1;

              var hallLen = that.data.length;
              outerloop:for(var i=playingHk; i<hallLen; i++){
                if(that.data[i] && that.data[i].point.length>0){
                  var pointLen = that.data[i].point.length;
                  for(var j=playingPk+1; j<=pointLen; j++){
                    if(j==pointLen){
                      playingPk = -1;
                      break;
                    }
                    if(that.data[i].point[j] && that.data[i].point[j].speech && that.data[i].point[j].speech.audio){
                      if(i!=-1 && j!=-1){
                        hk = i;
                        pk = j;
                        break outerloop;
                      }
                    }
                  }
                }
              }
              if(hk==-1 || pk==-1){
                alert('请手动点击您要播放的讲解！');
                return false;
              }else{
                that.playInit({hk:hk, pk:pk, ek:-1});
              }
            },
            movePlay:function(percent){
              var that = this;
              if (percent<0) {
                percent = 0;
              }
              if (percent>100) {
                percent = 100;
              }
              that.audio.setProgress({
                  progress: percent
              });
              if(that.playing.paused){
                that.playOrPause();
              }
            },
            getNextPointK:function(){
              var that = this;
              var hk = that.playing.hk;
              var pk = that.playing.pk;
              var pointLen = that.data[hk].point.length;

              var ret = -1; //返回下一个看点的k，如果没有了就返回 -1

              for(var i=pk+1; i<=pointLen; i++){
                if(that.data[hk].point[i] && that.data[hk].point[i].speech && that.data[hk].point[i].speech.audio){
                  ret = i;
                  break;
                }
              }
              return ret;
            },
            getNextHallK:function(){
              var that = this;
              var hk = that.playing.hk;
              var hallLen = that.data.length;
              var ret = -1; //返回下一个看点的k，如果没有了就返回 -1
              for(var i=hk+1; i<=hallLen; i++){
                if(that.data[i] && that.data[i].point.length>0){
                  ret = i;
                  break;
                }
              }
              return ret;
            },
            //播放控制结束
            clickAutoPlay:function(){
              this.autoPlay();
            },
            autoPlay:function(){
              var that = this;
              this.autoplay = this.autoplay==1?0:1;
              api.sendEvent({
                  name: 'ClickAutoEvent',
                  extra: {auto:that.autoplay}
              });
              this.showAutoPlayTip();
            },
            showAutoPlayTip:function(){
              var that = this;

              api.openFrame({
                  name: 'AutoTip',
                  url: 'AutoTip.html',
                  rect: {
                      x: api.winWidth-120-1,
                      y: api.winHeight-60-40+6,
                      w: 120,
                      h: 40
                  },
                  pageParam:{auto:that.autoplay}
              });

              if(that.timerTipAutoPlay && that.timerTipAutoPlay!=0){
                clearTimeout(that.timerTipAutoPlay);
              }
              that.timerTipAutoPlay = window.setTimeout(function(){
                that.hideAutoPlayTip();
              }, 3000);
            },
            hideAutoPlayTip:function(){
              api.closeFrame({
                  name: 'AutoTip'
              });
            },
            openUISlider: function(rect, cb){
              var that = this;
              that.uislider = api.require('UISlider');
              that.uislider.open({
                  animation: true,
                  orientation: 'horizontal',
                  rect: rect,
                  bubble: {
                      state: 'hide',
                  },
                  handler: {
                      w: 10,
                      h: 10,
                      bg: 'widget://res/images/handler.png'
                  },
                  bar: {
                      h: 4,
                      bg: '#dedede',
                      active: '#3e97a3'
                  },
                  value: {
                      min: 0,
                      max: 100,
                      step: 0.1,
                      init: 0
                  },
                  fixed: false
              }, function(ret, err) {
                  if (ret && (ret.eventType=='end' || ret.eventType=='click')) {
                      cb(ret.value);
                  }
              });
            },
            viewPic:function(images){
              var imgArr = images.split(',');
              var photoBrowser = api.require('photoBrowser');
              photoBrowser.open({
                  images: imgArr,
                  bgColor: '#000'
              }, function(ret, err) {
                  if (ret) {
                    if (ret.eventType=='click') {
                      photoBrowser.close();
                    }
                  }
              });
            },

            initFrameGroup: function(rect){
              var that = this;
              api.openFrameGroup({
                  name: 'playGroup',
                  scrollEnabled: false,
                  rect: rect,
                  index: that.mode=='list'?0:1,
                  frames: [
                    {
                      name: 'PlayList',
                      url: 'PlayList.html',
                      pageParam:{did:that.did, aid:that.aid},
                      bounces: true
                    },
                    {
                      name: 'PlayBig',
                      url: 'PlayBig.html',
                      pageParam:{did:that.did, aid:that.aid},
                      bounces: true
                    }
                  ]
              }, function (ret, err) {

              });
            },
            changePlayGroup: function(){
              var that = this;
              var mode = that.mode;
              that.mode = that.mode=='list'?'big':'list';
              var index = that.mode=='list'?0:1;
              api.setFrameGroupIndex({
                  name: 'playGroup',
                  index: index
              });
            }
          },
          created: function(){
            var that = this;

            var header = $api.byId('header');
            $api.fixStatusBar(header);
            api.setStatusBarStyle({style:'dark'});

            var headerPos = $api.offset(header);
            var main = $api.byId('main');
            var mainPos = $api.offset(main);

            var did = api.pageParam.did;
            var aid = api.pageParam.aid;
            var name = api.pageParam.name;
            var speecherPic = api.pageParam.speecherPic;

            that.did = did;
            that.aid = aid;
            that.name = name;
            that.speecherPic = speecherPic;

            var data = $api.getStorage('plays')[aid];

            var album = data.album;
            that.album = album;

            that.mode = album.lang==''?'list':'big';

            that.initFrameGroup({
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: mainPos.h - 5
            });

            var _d = data.rows;

            var name_max_len = that.album.lang?24:10;

            for(var i in _d){

              _d[i].list_hidden_point = 1;
              _d[i].big_hidden_point = 1;
              _d[i].point_audio_num = 0;  //有语音的看点的个数

              for(var j in _d[i].point){

                //看点标题
                if(_d[i].point[j].name.length>name_max_len){
                  _d[i].point[j].short_name = _d[i].point[j].name.substr(0, name_max_len)+'...';
                }else{
                  _d[i].point[j].short_name = _d[i].point[j].name;
                }


                if(_d[i].point[j].speech){
                  var period_show = common.getPeriodShow(_d[i].point[j].speech.period);
                  _d[i].point[j].speech.period_showing = _d[i].point[j].speech.period_show = period_show;
                  var bar_w= parseInt(_d[i].point[j].speech.period/360*100)+60;
                   if(bar_w>90){bar_w=90;}
                   _d[i].point[j].speech.bar_w = bar_w;
                   _d[i].point[j].speech.playing = false;
                   _d[i].point[j].speech.played = 0;
                   _d[i].point[j].speech.playSeconds = 0;
                }

                for(var k in _d[i].point[j].extend){
                  var period_show_extend = common.getPeriodShow(_d[i].point[j].extend[k].period);
                  _d[i].point[j].extend[k].period_show = period_show_extend;
                  _d[i].point[j].extend[k].period_showing = period_show_extend;
                  var bar_w = parseInt(_d[i].point[j].extend[k].period/360*100)+60;
                  if(bar_w>90){bar_w=90;}
                  _d[i].point[j].extend[k].bar_w = bar_w;
                  _d[i].point[j].extend[k].playing = false;
                  _d[i].point[j].extend[k].played = 0;
                  _d[i].point[j].extend[k].playSeconds = 0;
                }
                if(!_d[i].point[j].speech.audio && _d[i].point[j].extend.length<1){
                  _d[i].hidden_point = true;
                }
                if(_d[i].point[j].speech.audio){
                  _d[i].point_audio_num += 1; //计算有语音的看点的个数
                }
              }
            }
            that.data = _d;

            that.files = $api.getStorage('files');

            window.setTimeout(function(){
              that.showAutoPlayTip();
            }, 1000);

            that.openUISlider({x:-10, y:mainPos.h+headerPos.h, size:api.winWidth+20}, function(percent){
              if(that.playing.hk!=-1 && that.playing.pk!=-1){
                that.movePlay(percent);
              }
            });

            that.audio = api.require('audio');
            that.audioTip = api.require('audio');

            that.dialogBox = api.require('dialogBox');

            setTimeout(function(){
              api.parseTapmode();
            }, 1000);

          }
        });

        api.addEventListener({
            name: 'PlayEvent'
        }, function(ret, err) {
          var data = ret.value;
          vue.playInit(data);
        });

        api.addEventListener({
            name: 'PicViewEvent'
        }, function(ret, err) {
          var images = ret.value.images;
          vue.viewPic(images);
        });
      };

      function goback(){
        api.closeWin();
      }
  </script>
  </html>
